<template>
  <div class="parent-container">
    <el-drawer
      :with-header="true"
      :modal-append-to-body="true"
      title="客户详情"
      :visible.sync="table"
      direction="rtl"
      size="75%"
      :show-close ="false"
      :close-on-press-escape = "false"
      @close="drawerClose()"
    >
      <div slot="title" class="drawer-header">
        <h1>头部</h1>
      </div>
      <!-- 组件切换 -->
      <el-tabs type="border-card" @tab-click="handleClick" lazy class="detail-tag">
        <el-tab-pane label="用户管理">
          <div class="child-component">
            <component :is="detailarr"></component>
          </div>
        </el-tab-pane>
        <el-tab-pane label="配置管理">
          <div class="child-component">
            <component :is="detailarr"></component>
          </div>
        </el-tab-pane>
        <el-tab-pane label="角色管理">
          <div class="child-component">
            <component :is="detailarr"></component>
          </div>
        </el-tab-pane>
        <el-tab-pane label="定时任务补偿">
          <div class="child-component">
            <component :is="detailarr"></component>
          </div>
        </el-tab-pane>
        <el-tab-pane label="分类详情">
          <div class="child-component">
            <component :is="detailarr"></component>
          </div>
        </el-tab-pane>          
      </el-tabs>
    </el-drawer>
  </div>
</template>
<script>

import Formname from "./components/form-name.vue";
import Formname2 from "./components/form-name2.vue";
import Formname3 from "./components/form-name3.vue";
import Formname4 from "./components/form-name4.vue";
import Formname5 from "./components/form-name5.vue";
// import informdialog from './components/Inform-dialog.vue'
export default {
  // props:['table1'],
  components: { Formname, Formname2, Formname3, Formname4, Formname5 },
  data() {
    return {
      hahah: { Formname, Formname2, Formname3, Formname4, Formname5 },
      detailcomps: [Formname, Formname2, Formname3, Formname4, Formname5],
      table: false,
      dialog: false,
      username: "",
      detailarr: "Formname",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "80px",
      timer: null,
    };
  },
  methods: {
    show(row) {
      this.table = true;
      this.username = row.name;
    },
    handleClick(tab, event) {
      const a = tab.paneName;
      console.log(a, event);
      this.detailarr = this.detailcomps[a];
    },
    drawerClose() {
      this.table = false;   
    },
  },
 mounted(){
  // this.$nextTick(()=>{ // 页面渲染完成后的回调
  //       let a =window.getComputedStyle(this.$refs.drawercontainer).height
  //       console.log("a:",a)
  //   })

  //   let b = document.querySelector('drawercontainer');
  //   console.log("b",b.offsetHeight)
  //   console.log(this.$refs.drawercontainer.height)
 }
};
</script>

<style scoped>
.parent-container >>> .el-drawer__header {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 150px;  
  width: 100%;
  border: solid 1px #e6e6e6;
  background-color: #ffffff;
  /* height: 100%; */
}

/deep/ .el-drawer__body {
  overflow: hidden;
}
.detail-tag {
  position: relative;
  overflow: hidden;
  margin-top: 15px;
  height: calc(100% - 15px) !important;
}

.detail-tag >>> .el-tabs__content {
  overflow: hidden;
  height: calc(100% - 40px) !important;
}
.detail-tag >>> .el-tab-pane {
  height: 100%;
  overflow: hidden;
}
.child-component{
  height: 100%;
  overflow-y: auto;
  overflow-y: overlay;
  background-color: pink;
}
</style>
